<HEAD>

<script LANGUAGE="JavaScript">
   var dDate = new Date();
   var dCurMonth = dDate.getMonth();
   var dCurDayOfMonth = dDate.getDate();
   var dCurYear = dDate.getFullYear();
   var objPrevElement = new Object();



   function fToggleColor(myElement) {
      var toggleColor = "#ff0000";
      if (myElement.id == "calDateText") {
         if (myElement.color == toggleColor) {
            myElement.color = "";
         } else {
            myElement.color = toggleColor;
         }
      } else if (myElement.id == "calCell") {
         for (var i in myElement.children) {
            if (myElement.children[i].id == "calDateText") {
               if (myElement.children[i].color == toggleColor) {
                  myElement.children[i].color = "";
               } else {
                  myElement.children[i].color = toggleColor;
               }
            }
         }
      }
   }


   function fSetSelectedDay(myElement){
      if (myElement.id == "calCell") {
         if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
            myElement.bgColor = "#c0c0c0";
            objPrevElement.bgColor = "";
            document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
            objPrevElement = myElement;
         }
      }
   }



   function fGetDaysInMonth(iMonth, iYear) {
      var dPrevDate = new Date(iYear, iMonth, 0);
      return dPrevDate.getDate();
   }




   function fBuildCal(iYear, iMonth, iDayStyle) {
      var aMonth = new Array();
      aMonth[0] = new Array(7);
      aMonth[1] = new Array(7);
      aMonth[2] = new Array(7);
      aMonth[3] = new Array(7);
      aMonth[4] = new Array(7);
      aMonth[5] = new Array(7);
      aMonth[6] = new Array(7);

      var dCalDate = new Date(iYear, iMonth-1, 1);
      var iDayOfFirst = dCalDate.getDay();
      var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
      var iVarDate = 1;
      var i, d, w;

      if (iDayStyle == 2) {
         aMonth[0][0] = "Sunday";
         aMonth[0][1] = "Monday";
         aMonth[0][2] = "Tuesday";
         aMonth[0][3] = "Wednesday";
         aMonth[0][4] = "Thursday";
         aMonth[0][5] = "Friday";
         aMonth[0][6] = "Saturday";
      } else if (iDayStyle == 1) {
         aMonth[0][0] = "Sun";
         aMonth[0][1] = "Mon";
         aMonth[0][2] = "Tue";
         aMonth[0][3] = "Wed";
         aMonth[0][4] = "Thu";
         aMonth[0][5] = "Fri";
         aMonth[0][6] = "Sat";
      } else {
         aMonth[0][0] = "Su";
         aMonth[0][1] = "Mo";
         aMonth[0][2] = "Tu";
         aMonth[0][3] = "We";
         aMonth[0][4] = "Th";
         aMonth[0][5] = "Fr";
         aMonth[0][6] = "Sa";
      }

      for (d = iDayOfFirst; d < 7; d++) {
         aMonth[1][d] = iVarDate;
         iVarDate++;
      }


      for (w = 2; w < 7; w++) {
         for (d = 0; d < 7; d++) {
            if (iVarDate <= iDaysInMonth) {
               aMonth[w][d] = iVarDate;
               iVarDate++;
            }
         }
      }

      return aMonth;
   }




   function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
      var myMonth;
      myMonth = fBuildCal(iYear, iMonth, iDayStyle);
      document.write("<table border='1'>")
      document.write("<tr>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
      document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
      document.write("</tr>");
   
      for (w = 1; w < 7; w++) {
         document.write("<tr>")
         for (d = 0; d < 7; d++) {
            document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
            if (!isNaN(myMonth[w][d])) {
               document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
            } else {
               document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");
            }
            document.write("</td>")
         }
         document.write("</tr>");
      }
   document.write("</table>")
   }




   function fUpdateCal(iYear, iMonth) {
      myMonth = fBuildCal(iYear, iMonth);
      objPrevElement.bgColor = "";
      document.all.calSelectedDate.value = "";
      for (w = 1; w < 7; w++) {
         for (d = 0; d < 7; d++) {
            if (!isNaN(myMonth[w][d])) {
               calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
            } else {
               calDateText[((7*w)+d)-7].innerText = " ";
            }
         }
      }
   }
   // End -->
   </script>

</HEAD>

<BODY>

<script language="JavaScript" for=window event=onload>

   var dCurDate = new Date();
   frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
   for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
      if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
         frmCalendarSample.tbSelYear.options[i].selected = true;

</script>

<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">

<table border="1">
<tr>
<td>
<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
  
<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br/>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>





<script language="JavaScript"><!--
function popup (name,width,height) {
     var options = "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width="+width+",height="+height;
     Cal2=window.open(name,"popup",options);
}
//-->
</script>
</head>
<body>
<center><h1>A Pop-up Calendar</h1></center>
<p>This is a very nice calendar that shows all dates
 between 1900 and 2100.</p>
<p><a href="JavaScript:popup('calendar3.htm',350,270)">View the calendar</a></p>
